<template>
  <div class="filter">
    <t-dialog
      width="1166px"
      :footer="false"
      placement="center"
      :visible.sync="visible"
      :close-on-overlay-click="false"
    >
      <template #header>
        <div class="drawer-head" @click="close">
          <h3>{{ header }}</h3>
        </div>
      </template>
      <div>
        <t-descriptions>
          <t-descriptions-item label="仓库名称">
            <span slot="content">
              {{ info.name }}
            </span>
          </t-descriptions-item>
          <t-descriptions-item label="仓库类型">
            <span slot="content">{{ info.w_type === 0 ? '平台库' : '代理商库' }}</span>
          </t-descriptions-item>
          <t-descriptions-item label="仓库状态">
            <span slot="content">
              <t-tag v-if="info.status === 0" theme="default" variant="outline">禁用</t-tag>
              <t-tag v-if="info.status === 1" theme="success" variant="outline">启用</t-tag>
            </span>
          </t-descriptions-item>
          <t-descriptions-item label="联系人">
            <span slot="content">{{ info.linkman ? info.linkman : '无' }}</span>
          </t-descriptions-item>
          <t-descriptions-item label="联系电话">
            <span slot="content">{{ info.phone ? info.phone : '无' }}</span>
          </t-descriptions-item>
          <t-descriptions-item label="区域">
            <span slot="content">
              <p v-if="info.province">{{ info.province }}/{{ info.city }}/{{ info.district }}</p>
              <p v-else>无</p>
            </span>
          </t-descriptions-item>
          <t-descriptions-item label="地址详情">
            <span slot="content">{{ info.address ? info.address : '无' }}</span>
          </t-descriptions-item>
          <t-descriptions-item label="备注">
            <span slot="content">{{ info.remark ? info.remark : '无' }}</span>
          </t-descriptions-item>
        </t-descriptions>
      </div>
    </t-dialog>
  </div>
</template>

<script lang="jsx">
import UploadImg from "@/components/upload-img/index.vue";
import { IconFont } from "tdesign-icons-vue";
import MapContainer from "@/components/MapContainer/index.vue";
import {warehouseDetailApi} from "@/api/warehouse";

export default {
  name: 'WarehouseInfo',
  components: {UploadImg, IconFont, MapContainer},
  data() {
    return {
      visible: false,
      header: '仓库详情',
      info: {},
      editId: '',
    }
  },
  methods: {
    getDetail() {
      warehouseDetailApi(this.editId).then(res=> {
        this.info = res.data
      }).catch(err=> {
        console.log('err', err)
      })
    },
    open(id) {
      this.editId = id
      this.info = {}
      this.getDetail()
      this.visible = true
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
.base-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;

  p {
    padding: 12px 0;
    display: flex;
    color: var(--td-text-color-primary);
  }

  .label-title {
    width: 200px;
    font: var(--td-font-body-medium);
    color: var(--td-text-color-secondary);
    font-weight: 400;
    text-align: left;
    flex-shrink: 0;
  }
}

.footer-btns {
  display: flex;

  .confirm-btn {
    height: 42px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    border-radius: var(--td-radius-medium);
  }

  .cancel-btn {
    width: 132px;
    height: 42px;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    line-height: 22.4px;
    background-color: #B8B8B8;
  }
}
</style>
